<template>
    <div class="page">
        <tabs :options="tabs" v-model="tabActive" @onclick="handleNavClick"/>
        <router-view/>
    </div>
</template>

<style lang="less" scoped>
    .page{
        .btn-box{
            .btn-item{
                width: 12.5rem;
                float: left;
                line-height: 3.3rem;
                font-size: 1.1rem;
                text-align: center;

                img{
                    height: 1rem;
                    vertical-align: bottom;
                    margin: 1.15rem .4rem;
                }
            }
        }
    }
</style>

<script>
    export default {
        data(){
            let tabActive = 0;
            let data = {
                tabs: ['机构研报', '智库专家', '高端论坛', '专家讲台', '精品课堂', '资料下载', '同业沙龙'],
                navRoutes: ['/think', '/think/expert', '/think/forum', '/think/rostrum', '/think/classroom', '/think/dataDownload', '/think/salon']
            };
            let path = this.$route.path;
            if (data.navRoutes.includes(path)) {
                tabActive = data.navRoutes.indexOf(path);

            }
            return {
                ...data,
                tabActive,
            }
        },
        methods: {
            handleNavClick(key){
                const navRoutes = this.navRoutes;
                this.$router.replace({path: navRoutes[key]});
            }
        }
    }
</script>